import React, { Component } from 'react'
import { connect } from 'react-redux'
// connect  内置的高阶组件

class Com extends Component {
    render() {
        const { count, addCount, list, getList } = this.props
        return (
            <div>
                <h3>
                    react-redux   ---  { count }
                </h3>
                <button onClick={() => {
                    addCount()
                }}>change</button>
                <button onClick={() => {
                    getList()
                }}>获取数据</button>
                <div>
                    { list }
                </div>
            </div>
        )
    }
}



// 隐射 redux中的state  去 props
let mapStateToProps = (state) => {
    const { count, list } = state
    return {
        count,
        list
    }
}

// 
let mapDispatchToProps = (dispatch) => {
    // dispatch  ===  store.dispatch
    return {
        addCount() {
            dispatch({ type: "sagaAdd" })
        },
        getList() {
            dispatch({ type: "sagaGetList" })
        }
    }
}

Com = connect(mapStateToProps, mapDispatchToProps)(Com)

export default Com
